import React, {FC} from 'react'
import Box from "@/components/Box/Box";
import './CLass.scss'

const Class: FC = (props) => {
  const list = {
    base: [
      {
        title: 'HTML',
        content: 'HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。是一种用来结构化 Web 网页及其内容的标记语言。'
      },
      {
        title: 'CSS',
        content: 'CSS 层叠样式表 (Cascading Style Sheets），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题'
      },
      {
        title: 'JavaScript',
        content: 'JavaScript（通常简写为JS）是一种轻量的、解释性的、面向对象的头等函数语言，其最广为人知的应用是作为网页的脚本语言，但同时它也在很多非浏览器环境下使用。JS是一种动态的基于原型和多范式的脚本语言，支持面向对象、命令式和函数式的编程风格。'
      },
    ]
  }
  return (
    <div id={'Class'}>
      <h2>基础</h2>
      <div className={'content'}>
        {list.base.map(item => (
          <Box shodow={'shadow-hover'}>
            <header>{item.title}</header>
            <main>
              {item.content}
            </main>
          </Box>
        
        ))}
      </div>
    </div>
  )
}

export default Class